<template>
  <view class="addCommas">
    <view :style="{
      color: props.color,
      'font-size': props.fontSizeF,
      'font-weight': props.fontWeight,
      'font-family': props.isNumberFont ? 'numberFont' : 'avenir800',
    }" class="numF">
      {{ num[0] }}
    </view>
    <view v-if="num[1]" :style="{
      color: props.color,
      'font-size': props.fontSizeE,
      'font-weight': props.fontWeight,
      'font-family': props.isNumberFont ? 'numberFont' : 'avenir800',
    }" class="numE">
      {{ num[1] }}
    </view>
  </view>
</template>

<script setup>
import { addCommas } from "@/utils/regular.js";
import { ref, reactive, watch } from "vue";
const props = defineProps({
  value: {
    // type: Number||String,
    default: 0,
  },
  color: {
    type: String,
    default: "#fff",
  },
  fontSizeF: {
    type: String,
    default: "28px",
  },
  fontSizeE: {
    type: String,
    default: "22px",
  },
  fontWeight: {
    type: String,
    default: "400",
  },
  isComma: {
    type: Boolean,
    default: true,
  },
  isNumberFont: {
    type: Boolean,
    default: false,
  },
});
const num = ref([]);
watch(
  () => props.value,
  (newVal, oldVal) => {
    num.value = addCommas(newVal, props.isComma);
  }
);
num.value = addCommas(props.value, props.isComma);
</script>

<style lang="scss" scoped>
.addCommas {
  display: flex;
  align-items: baseline;
  justify-content: center;

  .numF {
    font-style: normal;
    font-feature-settings: "clig" off, "liga" off;
    // font-family: numberFont;
    letter-spacing: -0.6px
  }

  .numE {
    font-style: normal;
    font-feature-settings: "clig" off, "liga" off;
    // font-family: numberFont;
    letter-spacing: -0.6px
  }
}
</style>